import type { LayoutState } from './types/layout'
import { store } from '@/stores'
import { getDarkColor, getLightColor } from '@/utils/color'
/**
 * 布局Store
 */
export const useConfigStore = defineStore(`${import.meta.env.VITE_NAMESPACE}-config`, {
  state: (): LayoutState => {
    return {
      isMobile: false,
      mobileMenuShow: false,
      menuCollapse: false,
      platformConfig: {} as PlatformConfigs,
    }
  },
  actions: {
    getConfig(key: keyof PlatformConfigs) {
      return this.platformConfig[key]
    },
    setConfig(config: PlatformConfigs) {
      this.platformConfig = config
    },
    initTheme(isDark?: boolean) {
      const val = this.platformConfig.ThemeColor
      document.documentElement.style.setProperty('--sy-color-primary', val)
      document.documentElement.style.setProperty(
        '--sy-color-primary-dark-2',
        isDark ? `${getLightColor(val, 0.2)}` : `${getDarkColor(val, 0.3)}`,
      )
      for (let i = 1; i <= 9; i++) {
        const primaryColor = isDark ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`
        document.documentElement.style.setProperty(`--sy-color-primary-light-${i}`, primaryColor)
      }
    },

  },
  persist: true,
})

export function useConfigStoreHook() {
  return useConfigStore(store)
}

export function getConfig(key: keyof PlatformConfigs) {
  return useConfigStoreHook().getConfig(key)
}
